<template>
    <div class="paycontainer">
        <!-- header -->
        <mt-header title="确认订单">
            <a slot="left" @click="toBack">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <!-- paybody -->
        <div class="paybody">
            <!-- sendStart -->
            <div class="sendStart">开始配送</div>
            <!-- main -->
            <div class="main">
                <!-- cart-address -->
                <div class="cart-address">
                    <div class="address-item">
                        <p class="title">
                            <span>订单配送至</span>
                        </p>
                        <p class="address-detail">
                            <span class="address-text">{{this.$store.state.address}}</span>
                            <i class="el-icon-arrow-right"></i>
                        </p>
                        <h2 class="address-name">
                            <span>{{this.$store.state.user.name}}</span>
                            <span>(先生)</span>
                            <span class="phone">{{this.$store.state.user.phone}}</span>
                        </h2>
                    </div>
                </div>
                <!-- paycard -->
                <div class="card paycard">
                    <div class="delivery">
                        <div class="delivery-left">
                            <div class="delivery-time">送达时间</div>
                            <div class="delivery-extra"><span class="fengniao">蜂鸟专送</span></div>
                        </div>
                        <div class="delivery-right">
                            <div class="delivery-select">尽快送达({{list.time}}送达)</div>
                            <span class="el-icon-arrow-right taoPiaoPiao"></span>
                        </div>
                    </div>
                    <div class="how-pay">
                        <span class="pay-way">支付方式</span>
                        <span class="pay-text">在线支付</span>
                    </div>
                </div>
                <!-- payInfo -->
                <div class="card payInfo">
                    <h3>
                        <span>香他她煲仔饭</span>
                        <span>（潇湘奥园店）</span>
                    </h3>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell" v-for="(item, index) in list.product" :key="index">
                            <img :src="item.img" class="fanPic">
                            <div class="nameBox">
                                <p class="name">{{item.name}}</p>
                            </div>
                            <span class="fanNum">× 1</span>
                            <div class="price"><span class="rmb">¥</span>{{item.price}}</div>
                        </li>
                        <li class="mui-table-view-cell">
                            <span class="brandBox">包装<span class="brand baozhuang">包装</span></span>
                            <div class="nameBox">
                                <p class="name">餐盒</p>
                            </div>
                            <div class="price"><span class="rmb">¥</span>{{list.boxPrice}}</div>
                        </li>
                        <li class="mui-table-view-cell">
                            <span class="brandBox">蜂鸟<span class="brand fengniao">蜂鸟</span></span>
                            <div class="nameBox">
                                <p class="name">配送费</p>
                            </div>
                            <div class="price"><span class="rmb">¥</span>{{list.sendPrice}}</div>
                        </li>
                        <li class="mui-table-view-cell">
                            <span class="brandBox">满减<span class="brand manjian">满减</span></span>
                            <div class="nameBox">
                                <p class="name">在线支付立减优惠</p>
                            </div>
                            <div class="price subtraction"><span class="rmb">¥</span>{{list.online}}</div>
                        </li>
                        <li class="mui-table-view-cell">
                            <span class="brandBox">新客<span class="brand xinke">新客</span></span>
                            <div class="nameBox">
                                <p class="name">本店新客立减</p>
                            </div>
                            <div class="price subtraction"><span class="rmb">¥</span>{{list.news}}</div>
                        </li>
                        <li class="mui-table-view-cell">
                            <div class="nameBox">
                                <p class="name">红包</p>
                            </div>
                            <div class="redPacketBox">
                                <span class="redPacket"><span class="el-icon-s-goods"></span>2个可用</span>
                                <span class="el-icon-arrow-right"></span>
                            </div> 
                        </li>
                        <li class="mui-table-view-cell">
                            <div class="discounts">
                                <div class="discountsLeft">
                                    <a><span>优惠说明</span><span class="el-icon-warning-outline"></span></a>
                                </div>
                                <div class="discountsRight">小计 ¥<span class="price">{{list.count}}</span></div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- else -->
                <div class="card else"> 
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell">
                            <div class="cardBox">
                                <span class="card-left">餐具份数</span>
                                <span class="card-right" @click="popFlag=true" :class="wareNum == '未选择' ? '' : 'wareliChecked'">{{wareNum}}<span class="el-icon-arrow-right"></span></span>
                            </div>
                        </li>
                        <li class="mui-table-view-cell">
                            <div class="cardBox">
                                <span class="card-left">订单备注</span>
                                <span class="card-right">口味、偏好<span class="el-icon-arrow-right"></span></span>
                            </div>
                        </li>
                        <li class="mui-table-view-cell">
                            <div class="cardBox">
                                <span class="card-left">发票信息</span>
                                <span class="card-right">该店不支持线上开票，请电话联系商户</span>
                            </div>
                        </li>
                        <li class="mui-table-view-cell">
                            <div class="cardBox numHelp">
                                <span class="card-left">号码保护<span class="el-icon-question"></span></span>
                                <span class="card-right">该店不支持线上开票，请电话联系商户</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- footer -->
            <div class="footer">
                <span>¥{{list.count}} </span>
                <small>｜已优惠¥{{- list.online - list.news}}</small>
                <div class="submitbtn" @click="toPay">去支付</div>
            </div>
        </div>
        <!-- pop -->
        <mt-popup v-model="popFlag" position="bottom" popup-transition="popup-fade" modal="true">
            <div class="picker">
                <div class="pickerTitle">
                    <span class="pt ptLeft"></span>
                    <span class="ptNum">餐具份数</span>
                    <span class="pt ptRight"></span>
                </div>
                <ul infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="tableware">
                    <li v-for="item in tableware" :key="item" class="wareli" @click="wareNum=item + '餐具'; popFlag=false">{{ item }}</li>
                </ul>
            </div>
        </mt-popup>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
    data() {
        return {
            id: 2,
            list: {
                time: new Date().getHours() + ':' + new Date().getMinutes(),
                product: this.$store.state.product,
                boxPrice: 2,
                sendPrice: 0.6,
                online: -14,
                news: -1,
                redPacket: 2,
                count: (this.$store.state.priceCount - 10.4).toFixed(2),
            },
            popFlag: false,
            tableware: ['无需', '1份', '2份', '3份', '4份', '5份', '6份', '7份', '8份', '9份', '10份', '10份以上'],
            wareNum: '未选择'
        }
    },
    methods: {
        toBack() {
            this.$router.go(-1)
        },
        toPay() {
            MessageBox('饿了么提醒', '已下单，请耐心等待');
            this.$store.state.pay = this.list.count;
            this.$store.state.orderInfo = {
                id: this.id++,
                img: this.list.product[0].img,
                restaurant: '香他她煲仔饭（潇湘奥园店）',
                static: 0,
                time: new Date().getFullYear() + '-'  + parseInt(new Date().getMonth() + 1 * 1) + '-' + new Date().getDate() + ' ' + new Date().getHours().toString().padStart(2, '0') + ':' + new Date().getMinutes().toString().padStart(2, '0'),
                foods: this.list.product[0].name,
                amount: this.$store.state.merCount,
                price: this.$store.state.pay
            }
            this.$router.push({path: '/order'})
        }
    },
}
</script>

<style>
    .paycontainer .mint-header-title {
        font-weight: 700;
    }
</style>


<style scoped>
    /* header */
    header {
        height: 44px;
        font-size: 18px;
    }
    /* body */
    .sendStart {
        position: fixed;
        top: 6px;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 7px 0 8px;
        height: 28px;
        border-bottom-left-radius: 100px;
        border-top-left-radius: 100px;
        font-weight: 700;
        font-size: 13px;
        color: #fff; 
        z-index: 1000;
        background-image: linear-gradient(90deg,#6fc763,#5bb258);
    }
    .paybody {
        display: flex;
        flex-direction: column;
        position: relative;
        font-size: 14px;
        color: #333;
        padding: 0 6px 53px 6px;
        background-image: linear-gradient(0deg,#f5f5f5,#f5f5f5 65%,hsla(0,0%,96%,.3) 75%,hsla(0,0%,96%,0)),linear-gradient(270deg,#0085ff,#0af);
    }
    /* cart-address */
    .cart-address {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 0 11px 0;
        background-color: transparent;
    }
    .address-item {
        position: relative;
        flex: 0 100%;
        padding: 0 8px;
        color: #fff;
        overflow: hidden;
    }
    .address-item .title {
        margin: 0;
        font-size: 14px;
        line-height: 1.21;
        color: hsla(0,0%,100%,.8);
    }
    .title span {
        vertical-align: middle;
    }
    .address-detail {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.88;
    }
    .address-text {
        overflow: hidden;
        font-size: 22px;
        white-space: nowrap;
        max-width: calc(100% - 86px);
        color: #fff;
    }
    .address-detail i {
        color: #fff;
    }
    .address-name {
        font-size: 14px;
        line-height: 1.21;
        margin: 0 0 5px 0;
        font-weight: 400;
    }
    .phone {
        margin-left: 8px;
    }
    /* paycard */
    .card {
        margin-bottom: 8px;
        padding: 0 20px;
        background: #fff;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    }
    .delivery {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dotted #eee;
        padding: 16px 0;
    }
    .delivery-left {
        flex: 1;
    }
    .delivery-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
    }
    .delivery-extra {
        margin-top: -1px;
        font-size: 11px;
    }
    .fengniao {
        display: inline-block;
        margin-right: 5px;
        padding: 1px 4px;
        line-height: 1;
        background-image: linear-gradient(90deg,#0af,#0085ff);
        color: #fff;
        border-radius: 1px;
    }
    .delivery-right {
        display: flex;
        align-items: center;
        text-align: right;
    }
    .delivery-select {
        color: #2395ff;
    }
    .taoPiaoPiao {
        margin-left: 2px;
        font-size: 12px;
    }
    .how-pay {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        font-size: 15px;
        line-height: 1.2;
    }
    .pay-way {
        color: #333;
    }
    .pay-text {
        color: #2395ff;
    }
    /* payInfo */
    .payInfo h3 {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
        padding: 16px 0;
        color: #333;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .payInfo h3 span {
        display: inline-block;
        vertical-align: middle;
    }
    .payInfo h3 span:first-child {
        font-size: 17px;
        line-height: 1;
    }
    .payInfo h3 span:last-child {
        margin-left: 5px;
        font-size: 13px;
        line-height: 1.15;
        font-weight: 400;
    }
    .mui-table-view-cell {
        padding: 12px 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mui-table-view-cell::before,
    .mui-table-view-cell::after {
        background: #eee;
    }
    .fanPic {
        width: 36px;
        height: 36px;
    }
    .nameBox {
        margin-left: 8px;
        overflow: hidden;
        flex: 4;
    }
    .name {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333;
    }
    .fanNum {
        flex: 1;
        text-align: right;
        font-size: 12px;
    }
    .price {
        flex: 3;
        text-align: right;
        font-size: 16px;
    }
    .rmb {
        font-size: 12px;
    }
    .brandBox {
        position: relative;
        font-size: 10px;
        color: transparent;
        white-space: nowrap;
        display: inline-block;
        padding: 0 4px;
        height: 14px;
        border-radius: 1px;
        vertical-align: middle;
        overflow: hidden;
    }
    .brand {
        position: absolute;
        left: 0;
        top: 0;
        right: -100%;
        bottom: -100%;
        transform: scale(.5);
        transform-origin: 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: 500;
        line-height: 1;
        text-align: center;
    }
    .baozhuang {
        color: #8395ae;
        border: 2px solid rgba(131,149,174,.34);
        background-color: rgba(149,168,193,.14);
    }
    .manjian {
        background-color: rgb(240, 115, 115);
        color: #fff;
    }
    .xinke {
        background-color: rgb(0, 183, 98);
        color: #fff;
    }
    .subtraction {
        color: rgb(255, 74, 7);;
    }
    .redPacketBox {
        display: flex;
        align-items: center;
        color: #bbb;
        font-size: 13px;
    }
    .redPacket {
        position: relative;
        color: #fff;
        white-space: nowrap;
        display: inline-block;
        padding: 0 2px;
        margin-right: 2px;
        border-radius: 2px;
        height: 18px;
        background: #FF6017;
    }
    .discounts {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #333;
    }
    .discountsLeft a {
        display: flex;
        align-items: center;
        color: #bbb;
        font-size: 13px;
    }
    .discountsLeft span {
        margin-right: 2px;
    }
    .discountsRight span {
        font-size: 22px;
        color: #333;
    }
    /* else */
    .else {
        margin-top: 16px;
    }
    .cardBox {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-right {
        display: flex;
        align-items: center;
        color: #bbb;
        font-size: 13px;
    }
    .el-icon-question {
        margin-left: 2px;
    }
    .numHelp {
        flex-direction: column;
        align-items: flex-start;
    }
    .numHelp .card-right {
        margin-top: 6px;
        font-size: 11px;
        color: #999;
    }
    /* footer */
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        width: 100%;
        height: 44px;
        background: #3c3c3c;
        z-index: 2;
    }
    .footer span {
        padding-left: 10px;
        color: #fff;
        font-size: 18px;
    }
    .footer small {
        color: #999;
        font-size: 12px;
        vertical-align: middle;
    }
    .submitbtn {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        background: #00e067;
        min-width: 105px;
        padding: 0 5px;
        color: #fff;
        font-size: 17px;
        text-align: center;
        line-height: 44px;
    }
    /* pop */
    .picker {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f5f5f5;
        box-shadow: 0 -1px 5px 0 rgba(0,0,0,.4);
        z-index: 100;
        padding: 20px 26px;
        max-width: 1920px;
        width: 1920px;
        box-sizing: border-box;
        transition: transform .2s,-webkit-transform .2s;
        will-change: transform;
    }
    .tableware {
        margin-top: 13px;
        max-height: 300px;
        overflow-y: scroll;
    }
    .tableware::-webkit-scrollbar{
       display: none;
    }
    .wareli {
        text-align: center;
        margin-bottom: 28px;
    }
    .pickerTitle {
        position: relative;
        margin-bottom: 12px;
        padding: 0 28px;
        text-align: center;
        font-size: 17px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .pt {
        display: inline-block;
        width: 16px;
        height: 1px;
        border-top: 1px solid #333;
    }
    .ptNum {
        margin: 0 12px;
    }
    .wareliChecked {
        color: #333;
    }
</style>